<template>
	<d2-container>
		<template>
			<div class="form-area">
				<el-form ref="detailForm" :model="formData" label-width="120px" style="height:auto">
					<div class="form-title"><h3>基本信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="合作伙伴名称" prop="partnerName">
								<el-input type="text" v-model="formData.partnerName" placeholder="合作伙伴名称" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="合作伙伴编码" prop="partnerCode">
								<el-input type="text" v-model="formData.partnerCode" placeholder="合作伙伴编码" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="联系人" prop="name">
								<el-input type="text" v-model="formData.name" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系电话" prop="name">
								<el-input type="text" v-model="formData.name" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="消费券商品名称" prop="productCouponName">
								<el-input type="text" v-model="formData.productCouponName" placeholder="消费券商品名称" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="消费券面额(元)" prop="couponAmount">
								<el-input type="text" v-model="formData.couponAmount" placeholder="消费券面额" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="发放数量(张)" prop="grantNum">
								<el-input type="text" v-model.number="formData.grantNum" placeholder="发放数量" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" :rows="4" v-model="formData.remark" placeholder="备注" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title"><h3>审核信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="提交人" prop="submitor">
								<el-input type="text" v-model="formData.submitor" placeholder="提交人" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="提交时间" prop="submitTime">
								<el-date-picker v-model="formData.submitTime" type="datetime" placeholder="提交时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核人" prop="auditor">
								<el-input type="text" v-model="formData.auditor" placeholder="审核人" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="审核时间" prop="auditTime">
								<el-date-picker v-model="formData.auditTime" type="datetime" placeholder="审核时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核状态" prop="status">
								<el-input :value="formData.status == 1 ? '审核中' : formData.status == 2 ? '审核通过' : formData.status == 3 ? '审核未通过' : '未提交'" readonly></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="12">
							<el-form-item label="交付状态" prop="deliverStatus">
								<el-input :value="formData.deliverStatus == 1 ? '已交付' : '未交付'" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核说明" prop="auditDesc">
								<el-input type="textarea" :rows="4" v-model="formData.auditDesc" placeholder="审核说明" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

          <div class="form-title"><h3>系统信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="创建时间" prop="createTime">
								<el-date-picker v-model="formData.createTime" type="datetime" placeholder="创建时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="创建人" prop="creator">
								<el-input type="text" v-model="formData.creator" placeholder="创建人" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="修改时间" prop="reviseTime">
								<el-date-picker v-model="formData.reviseTime" type="datetime" placeholder="修改时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="修改人" prop="reviser">
								<el-input type="text" v-model="formData.reviser" placeholder="修改人" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<!-- 按钮 -->
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item>
<div class="form-submit">
                <el-button v-if="formData.status == 0 || formData.status == 3" class="form-cancle-btn" type="primary" @click="doSubmit()">提交</el-button>
							  <el-button v-if="formData.status == 1 && formData.deliverStatus==0" class="form-cancle-btn" type="primary" @click="doAudit()">审核</el-button>
                <el-button v-if="formData.status == 2 && formData.deliverStatus==0" class="form-cancle-btn" type="primary" @click="doConfirmDeliver()">确认交付</el-button>
              	<el-button class="form-cancle-btn" @click="closeCurrentPage()">关闭</el-button>
							</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</template>
    <!-- 弹框-审核表单 -->
		<template>
			<el-dialog title="消费券合作审核" width="50%" :visible.sync="showAuditForm" :before-close="handleCloseAuditForm">
				<div class="form-area">
					<el-form ref="auditForm" :model="auditForm" :rules="rulesAuditForm" label-width="100px" style="height:auto">
						<div class="form-title"><h3>消费券合作审核</h3></div>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="审核结果" prop="status">
									<el-radio-group v-model="auditForm.status">
										<el-radio label="2" border>通过</el-radio>
										<el-radio label="3" border>不通过</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="审核说明" prop="auditDesc">
									<el-input type="textarea" :rows="4" v-model="auditForm.auditDesc" placeholder="请输入审核说明"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="dialog-footer" slot="footer">
					<el-button @click="closeAuditForm()">取消</el-button>
					<el-button type="primary" @click="confirmAuditForm('auditForm')">确定</el-button>
				</div>
			</el-dialog>
		</template>
	</d2-container>
</template>
<script>
import { findProductCouponCp, auditProductCouponCp, confirmDeliver } from '@api/coupon/productCouponCp'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'coupon-productCouponCpDetail',
  data () {
    return {
      formData: {
        id: '',
        partnerId: '',
        partnerName: '',
        partnerCode: '',
        name: '',
        phone: '',
        productCouponId: '',
        productCouponName: '',
        couponAmount: '',
        grantNum: '',
        status: '0',
        deliverStatus: '0',
        remark: '',
        createTime: '',
        creator: '',
        reviseTime: '',
        reviser: ''
      },
      showAuditForm: false,
      auditForm: {
        id: '',
        status: '',
        auditDesc: ''
      },
      rulesAuditForm: {
        status: [{ required: true, message: '请选择审核结果', trigger: 'blur' }],
        auditDesc: [{ required: true, message: '请输入审核说明', trigger: 'blur' }, { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }]
      },
	    isReturnList: false // 关闭页面是否返回列表
    }
  },
  created () {
  },
  mounted () {
    this.productCouponCpDetailId = sessionStorage.getItem('productCouponCpDetailId')
    if (this.productCouponCpDetailId == null || this.productCouponCpDetailId == undefined) {
      return
    }
    this.auditForm.id = this.productCouponCpDetailId
    this.getProductCouponCp(this.productCouponCpDetailId)
  },
  beforeDestroy () {
	  if (this.isReturnList) {
      // 跳转到列表页面
      this.$router.push({
		  path: 'coupon/productCouponCpList',
		  name: 'coupon-productCouponCpList',
		  params: ''
      })
	  }
  },
  watch: {},
  computed: {
    ...mapState('d2admin/page', ['opened', 'current'])
  },
  methods: {
    ...mapActions('d2admin/page', ['close']),
    getProductCouponCp (productCouponCpDetailId) {
      findProductCouponCp({ id: productCouponCpDetailId })
        .then(res => {
          if (res.code == '000000') {
            this.formData = res.data
          } else {
            this.$message({ message: '消费券合作加载失败，请重试!', type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    // 关闭
    closeCurrentPage () {
      // 关闭当前窗口
	    this.isReturnList = true
      let tagName = this.current
      this.close({ tagName })
    },
    // 提交
    doSubmit () {
      this.loading = true
      submitProductCouponCp({ id: this.productCouponCpDetailId })
        .then(res => {
          if (res.code == '000000') {
            this.$message({ message: res.message, type: 'success' })
            this.closeCurrentPage()
            this.loading = false
          } else {
            this.$message({ message: res.message, type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    // 审核
    doAudit() {
      this.showAuditForm = true
    },
    handleCloseAuditForm (done) {
      this.auditForm = {
        id: this.productCouponCpDetailId,
        status: '',
        auditDesc: ''
      }
      done()
    },
    closeAuditForm () {
      this.auditForm = {
        id: this.productCouponCpDetailId,
        status: '',
        auditDesc: ''
      }
      this.showAuditForm = false
    },
    confirmAuditForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true

          auditProductCouponCp(this.auditForm)
            .then(res => {
              if (res.code == '000000') {
                this.$message({ message: res.message, type: 'success' })
                this.loading = false
                this.closeAuditForm()
                this.closeCurrentPage()
              } else {
                this.$message({ message: res.message, type: 'error' })
              }
            })
            .catch(err => {
              console.log('err', err)
              this.loading = false
            })
        }
      })
    },
	  // 确认交付
	  doConfirmDeliver () {
	    this.$confirm('当前消费券数量是否已全部交付给合作伙伴【' + this.formData.partnerName + '】？').then(_ => {
        this.loading = true
        confirmDeliver({
          id: this.productCouponCpDetailId
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.closeCurrentPage()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
	  }
  }
}
</script>

<style scoped>
	.table-header {
		display: flex;
	}
</style>
